<%@ page import="myexchange.Game"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<g:set var="entityName"
	value="${message(code: 'game.label', default: 'Game')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Game xChange</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
            </ul>
            <ul class="nav pull-right">
              <li><g:link controller="user" action="logout">logout</g:link></li>
			</ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
<g:javascript>
$("#list2").jqGrid({ 
	url:"${createLink(action: 'listJSON', controller: 'game')}",
	editurl:"${createLink(action: 'editJSON', controller: 'game')}", 
	datatype: "json", 
	colNames:['nick name','user name', 'first name', 'last name', 'password'], 
	colModel:[ {name:'nickname',index:'nickname'}, {name:'userName',index:'userName'}, {name:'firstName',index:'firstName'}, {name:'lastName',index:'lastName'}, {name:'password',index:'password'}], 
	rowNum:2, rowList:[2,10,20,30], 
	pager: '#pager2', 
	sortname: 'nickname', 
	viewrecords: true, 
	sortorder: "desc", 
	caption:"User list" 
	}); 
	$("#list2").jqGrid('navGrid','#pager2',{edit:true,add:true,del:true});
</g:javascript>
<g:javascript>
  $(document).ready(function() {
                         <jqgrid:grid
                                id="contact"
                                url="'${createLink(action: 'listJSON')}'"
                                editurl="'${createLink(action: 'editJSON')}'"
                                colNames="'First Name', 'Last Name', 'E-mail', 'Phone', 'id'"
                                colModel="{name:'firstName', editable: true},
                                                {name:'lastName', editable: true},
                                                {name:'email', editable: true},
                                                {name:'phone', editable: true},
                                                {name:'id', hidden: true}"
                                sortname="'lastName'"
                                caption="'Contact List'"
                                height="300"
                                autowidth="true"
                                scrollOffset="0"
                                viewrecords="true"
                                showPager="true"
                                datatype="'json'">
                                <jqgrid:filterToolbar id="contact" searchOnEnter="false" />
                                <jqgrid:navigation id="contact" add="true" edit="true" 
                                      del="true" search="true" refresh="true" />
                                <jqgrid:resize id="contact" resizeOffset="-2" />
                         </jqgrid:grid>
                         });
</g:javascript>
	 <div class="container">
	     <div class="row">
				<table id="list2" class="span10 offset1"></table> 
				<div id="pager2"></div>
		</div>
	     <div class="row">
				<jqgrid:wrapper id="contact" />
		</div>
	</div>
</body>
</html>
